<template>
  <div class="flex flex-col w-full px-12">
    <!-- 工具栏 -->
    <div class="w-1/2 my-4 flex items-center">
      <Tip v-if="has" class="mr-4" :text="`上一次保存时间：${dateTimeRef}`">
        <CarryOutOutlined :style="{ color: '#46bd87' }" />
      </Tip>
      <Tip v-else class="mr-4" text="暂无数据">
        <CarryOutOutlined :style="{ color: '#46bd87' }" />
      </Tip>

      <a-button class="mr-4" @click="btnParse()" :disabled="!has">
        解析
      </a-button>
    </div>

    <!-- 解析概况栏 -->
    <Overview :overview="viewController" />

    <!-- 控制器层 多个controller -->
    <template v-if="showMany">
      <Tip class="mt-4 w-100" text="点击下列控制器查看详情">
        <ExclamationCircleOutlined :style="{ color: '#ee9900' }" />
      </Tip>
      <ControllerList
        :controllerRef="controllersRef"
        @click="controllerClick"
      />
    </template>

    <!-- 控制器详情 -->
    <template v-if="currentController != null">
      <div class="flex items-center mt-4 mb-4">
        <a-button
          class="mr-4"
          :icon="h(ArrowLeftOutlined)"
          @click="resetController"
          v-if="controllerNumberRef > 1"
        />

        <Tip class="w-100" :text="currentController?.name">
          <SettingOutlined :style="{ color: '#23dbc9' }" />
        </Tip>
      </div>

      <div class="flex mb-4">
        <Overview
          v-for="(item, index) in overview"
          :key="index"
          :overview="item"
          @click="toggle(item)"
        />
      </div>
      <Codemirror :code="currentCode" mode="js" :height="620" />
    </template>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, reactive, ref, unref, h, watch } from 'vue';
  import Codemirror from '@/components/Codemirror.vue';
  import Overview from '@/components/Overview.vue';
  import ControllerList from '@/components/ControllerList.vue';
  import Tip from '@/components/Tip.vue';

  import { useData } from '@/hooks/useData';
  import { useParse } from '@/hooks/useParse';
  import {
    ArrowLeftOutlined,
    CarryOutOutlined,
    ExclamationCircleOutlined,
    SettingOutlined,
  } from '@ant-design/icons-vue';
  import model_png from '@/assets/images/model.png';
  import interface_png from '@/assets/images/interface.png';
  import controller_png from '@/assets/images/controller.png';

  import { controllerResult } from '../../lib';

  // 本地数据
  const { apiFoxCode, dateTimeRef, apiFoxJSON, readLocal } = useData();
  const has = computed(() => !!apiFoxCode.value);

  // 概况
  const controllerNum = computed(() => unref(controllerNumberRef));
  const viewController = reactive({
    name: '控制器数量',
    num: controllerNum,
    img: controller_png,
    num_bg: 'controller',
  });

  // 控制器相关
  const overview = reactive([
    {
      name: '接口',
      img: interface_png,
      num_bg: 'interface',
    },
    {
      name: '模型',
      img: model_png,
      num_bg: 'model',
    },
  ]);

  const showMany = computed(
    () => controllerNumberRef.value > 1 && currentController.value == null,
  );

  const currentController = ref<controllerResult | null>(null);

  function controllerClick(controller: controllerResult) {
    currentController.value = controller;
  }

  function resetController() {
    currentController.value = null;
  }

  // code显示
  const type = ref('接口');
  function toggle(item: any) {
    type.value = item.name;
  }
  const currentCode = computed(() => {
    if (type.value === '接口') {
      return apiMapRef.value.get(currentController.value?.name);
    } else {
      return schemaMapRef.value.get(currentController.value?.name);
    }
  });

  // 解析
  const {
    apiMapRef,
    schemaMapRef,
    controllersRef,
    controllerNumberRef,
    hanleParse,
    parseControllers,
  } = useParse();

  onMounted(() => {
    btnParse();
  });

  function btnParse() {
    readLocal();
    hanleParse(unref(apiFoxJSON));
  }

  watch(
    controllersRef,
    (nv, ov) => {
      if (nv.length === 1) {
        currentController.value = nv[0];
      }
    },
    { immediate: true, deep: true },
  );
</script>

<style lang="less" scoped></style>
